<template>
  <div class="personContainer">
    <div class="header">
      <img v-if="isShow" :src="headImgURL" alt="">
      <img v-else src="/static/tabs/personal.png" alt="">
      <span v-if="isShow">{{userName}}</span>
      <button v-else open-type="getUserInfo" @getuserinfo="getUserInfo">登录</button>
    </div>

    <div class="options">
      <div @click="toWrongSet" class="wrongList"><img src="/static/user/wrong.png"><p>错题集</p></div>
      <div class="ranking" @click="signIn"><img src="/static/tabs/me.png"><p>签到</p></div>
      <div class="myExam" @click="toMyExam"><img src="/static/user/exam.png"><p>我的考试</p></div>
    </div>

    <div class="feedBack">
      <div @click="toFeedBack">意见反馈</div>
      <div @click="contactNumber">联系电话</div>
    </div>
  <div class="footer">
    <a href="https://www.baidu.com/" class="weui-footer__link">六等分社区</a>
    <p class="weui-footer__text">Copyright © 2020-2020 poorguy</p></div>
  </div>
</template>

<script>
import globalStore from "../../stores/global-store";
export default {
  components: {
  },
  computed: {
    isShow() {
      return globalStore.state.isLogin;
    },
    userName() {
      if (globalStore.state.isLogin) {
        return globalStore.state.userInfo.nickName;
      }
      else {
        return null
      }
    },
    headImgURL() {
      if (globalStore.state.isLogin) {
        return globalStore.state.userInfo.avatarUrl;
      }
      else {
        return null
      }
    },
    },
  data () {
    return {
      data: [],
      userInfo: {}
    }
  },
  created () {
  },
  methods: {
    getUserInfo(data) {
      wx.getUserInfo({
        success: (data) => {
          console.log(data);
          this.userInfo = data.userInfo;
          globalStore.state.userInfo = data.userInfo;
          globalStore.state.isLogin = true;
          // console.log(globalStore.state.userInfo)
        },
        fail: () => {
          console.log('获取失败');
        }
      }),
        wx.login({
          success(res){
            // console.log("res.code:" + res.code)
            wx.request({
              url: 'https://api.weixin.qq.com/sns/jscode2session',
              data: {
                appid: 'wx2acede8eb64a7db1',
                secret: 'f9ed6d18659e0bd6ba9b69a6d5ed9985',
                js_code: res.code,
                grant_type: 'authorization_code'
              },
              methods: "GET",
              success(res){
                // console.log(res.data)
                // console.log('openid:'+res.data.openid)
                globalStore.state.openId = res.data.openid
                console.log(globalStore.state.openId)
              }
            })
          }
        })
    },
    toFeedBack() {
      wx.navigateTo({
        url: '/pages/feedback/main'
      })
    },
    contactNumber() {
      wx.showModal({
        title: '联系电话',
        content: '88888888888',
        success (res) {
          if (res.confirm) {
            console.log('用户点击确定')
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    toWrongSet(){
      wx.navigateTo({
        url: '/pages/myWrongSet/main'
      })
      // mpvue.reLaunch({url:'/pages/wrongSet/main'})
    },
    signIn() {
      wx.showLoading({
        title: '目前尚未开放',
      })
      setTimeout(function () {
        wx.hideLoading()
      }, 2000)
    },
    toMyExam(){
      wx.navigateTo({
        url: '/pages/myExam/main',
        success: function(res){
          // success
        },
        fail: function() {
          // fail
        },
        complete: function() {
          // complete
        }
      })
    }
  }
}
</script>

<style>
.personContainer {
  width: 100%;
  height: 100%;
}
  .header {
    padding: 25px;
    background: #66CCCC;
  }
  .header img {
    width: 60px;
    height: 60px;
    vertical-align: middle;
    border-radius: 30px
  }
  .header button {
    display: inline-block;
    hight: 30px;
    line-height: 30px;
    background: rgba(255,255,255, 0.5);
    vertical-align: middle;
    margin-left: 20px;
    margin-bottom: 5px;
    max-width: 100px;
  }
  .header span {
    hight: 30px;
    line-height: 30px;
    margin: 0 20px;
    max-width: 100px;
  }
.options {
  position: relative;
  margin: 20px 10px;
  height: 120px;
  background: #cccccc;
  border-radius: 15px;
}
  .options div {
    margin-top: 10px;
    background: aliceblue;
    height: 100px;
    text-align: center;
  }
  .options div {
    border-radius: 8px;
  }
  .options div img {
    width: 60px;
    height: 60px;
    padding: 0 15px;
  }
  .options .wrongList {
    float: left;
    margin-left: 8px;
  }
  .options .ranking {
    position: absolute;
    left: 50%;
    margin-left: -45px;
  }
  .options .myExam {
    float: right;
    margin-right: 8px;
  }

  .feedBack {
    background: #ffffff;
    margin: 80px 10px;
    border: 1px solid #ffffff;
    border-radius: 10px;
  }
  .feedBack div {
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #f2f2f2;
    padding-left: 10px;
    margin: 5px;
  }


  .footer {
    height: 25px;
    text-align: center;
    line-height: 25px;
    margin-bottom: 10px;
  }
</style>
